<template>
  <div class="article" v-if="article !== null">
    <div class="banner"> 
      <div class="container">
        <h1>{{article.title}}</h1>
        <app-author-meta
          :username="article.author.username"
          :image="article.author.image"
          :createdTime="article.createdAt"
        />
      </div>
    </div>
    <div class="container">
      <div class="marked-text" v-html="body"></div>
      <ul class="tag-list">
        <li v-for="tag in article.tagList" :key="tag">{{tag}}</li>
      </ul>
      <comment-input
        :slug="slug"
        @flush-comments="flushComments"
      />
      <comment-list :comments="comments"/>
    </div>
  </div>
</template>

<script lang="ts">

  import AppAuthorMeta from 'src/components/common/AppAuthorMeta/index.vue'
  import CommentInput from 'src/components/CommentInput/index.vue'
  import CommentList from 'src/components/ArticleCommentList/index.vue'
  import { defineComponent, onMounted, reactive, ref } from 'vue'
  import marked from 'marked'
  import { getCommentsByArticle } from 'src/services/comment'
  import { getArticleDetail } from 'src/services/article'
  import useComments from 'src/hooks/useComments'
  export default defineComponent({
    components: {
      AppAuthorMeta,
      CommentInput,
      CommentList
    },
    props: {
      slug: {
        type: String,
        required: true
      }
    },
    setup (props) {

      const article = ref<Article | null>(null)
      getArticleDetail(props.slug).then(res => {
        article.value = res
      })
      const {
        comments
      } = useComments(props.slug)
      const flushComments = async () => {
        comments.value = await getCommentsByArticle(props.slug)
      }
      return {
        article,
        body: marked(article.value == null ? '':article.value.body),
        flushComments,
        comments,
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import "src/assets/scss/variables.scss";
  .article {
    min-height: calc(100vh - 110px);
  }
  .banner {
    height: 220px;
    background-color: $backgroundColor;
    color: white;
    box-shadow: 0 0 4px rgba($color: #000000, $alpha: 0.6) inset;
    .container {
      height: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #f6f6f6;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
    }
  }
  .tag-list > li {
    display: inline-block;
    border: 1px solid #eee;
    height: 25px;
    padding: 0 20px;
    margin-right: 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 23px;
    color: #aaa;
  }
  .comments {
    display: flex;
    justify-content: center;
  }
</style>